<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <CommentItem v-for="(item,index) in list" :key="index" :item='item' v-model='item.is_liking'
        @isLike='item.like_count++' @click-replay='$emit("click-replay",$event)' />
    </van-list>
    <!-- 评论列表 -->
  </div>
</template>

<script>
import { getComments } from '@/api/comment.js'
import CommentItem from './comment-item.vue'
export default {
  name: 'ArticleComment',
  props: {
    articleId: {
      type: [String, Object, Number]
    },
    type: {
      type: String,
      default: 'a'
    },
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      offset: null,
      limit: 20,
      // list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false // 是否加载结束
    }
  },
  created () {
  },
  components: { CommentItem },
  methods: {
    async onLoad () {
      try {
        const { data: { data } } = await getComments(
          {
            type: this.type,
            offset: this.offset,
            limit: this.limit,
            source: this.articleId.toString()
          }
        )
        this.list.push(...data.results)
        this.$toast('获取列表成功！')
        if (this.list.length >= data.total_count) {
          this.finished = true
        } else {
          this.offset = data.last_id
        }
      } catch (err) {
        this.$toast('获取评论列表失败！')
      }
      this.loading = false
    }
  }
}
</script>

<style scoped lang="less">
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.van-list {
  margin-bottom: 45px;
}
</style>
